@import "../constants/typography";

// CTA's
a.btn {
  display: inline-flex;
  align-items: center;
}
.btn {
  border-radius: 0;
  border-width: 0.1rem;
  height: 4rem;
  padding: 0 1.5rem;

  font-size: $main-font-size;
  font-weight: bold;
  line-height: $main-font-height;

  &.btn-primary {
    @include button-variant($black, $black, $black, $black, $black, $black);
    &:focus {
      box-shadow: none;
      border-color: $mid-gray;
    }
    &:disabled {
      background-color: $mid-gray;
      border-color: $mid-gray;
      opacity: 100%;
    }
  }
  &.btn-outline-primary {
    @include button-outline-variant($black, $gray-code, $gray-code, $gray-code);
    background-color: $gray-code;
    outline: none;
    &:hover {
      background-color: $white;
      border-color: $black;
      color: $black;
    }
    &:focus {
      box-shadow: 0 0 0 0.2rem $mid-gray;
    }
    &:disabled {
      background-color: $gray-code;
      border-color: $mid-gray;
      color: $mid-gray;
    }
  }
}

//Fields
.form-control {
  border: $black solid 1px;
  border-radius: 0;
  height: 4rem;
  padding: 0 1rem;

  color: $black;
  font-size: $main-font-size;
  font-weight: 300;
  line-height: $main-font-height;

  &::placeholder {
    color: $mid-gray;
  }

  &:disabled {
    background-color: $white;
    border-color: $mid-gray;
    color: $mid-gray;
  }
  &:focus {
    border: $black solid 1px;
    box-shadow: 0 0 0 0.2rem $mid-gray;
  }
}

.custom-select {
  border: $black solid 1px;
  border-radius: 0;
  height: 4rem;
  padding: 0 1rem;

  color: $black;
  font-size: $main-font-size;
  font-weight: 300;
  line-height: $main-font-height;

  background-image: url("data:image/svg+xml,<svg width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>");

  &::placeholder {
    color: $mid-gray;
  }
  &:disabled {
    background-color: $white;
    color: $mid-gray;
  }
  &:focus {
    border: $black solid 1px;
    box-shadow: 0 0 0 0.2rem $mid-gray;
  }
}

.invalid-feedback {
  text-align: left;
}

/* Basic container styles */
.container {
  max-width: 1200px;
  margin: 0 auto;
}
